<template>
  <article class="article-card">
    <router-link :to="`/article/${article.id}`" class="article-link">  <!-- 确保使用article.id -->
      <!-- 文章标题 -->
      <h2 class="article-title">{{ article.title || '无标题' }}</h2>
      
      <!-- 文章元信息 -->
      <div class="article-meta">
        <span class="author">
          <i class="fas fa-user"></i> {{ article.author || '未知作者' }}
        </span>
        <time class="article-date">
          <i class="far fa-calendar-alt"></i> {{ formatDate(article.createTime) }}
        </time>
        <span class="view-count">
          <i class="fas fa-eye"></i> {{ article.viewCount || 0 }} 阅读
        </span>
        <span class="category" v-if="article.categoryName">
          <i class="fas fa-folder"></i> {{ article.categoryName }}
        </span>
      </div>

      <!-- 文章摘要 -->
      <div class="article-excerpt" v-html="getExcerpt(article.mainContent)" v-if="article.mainContent"></div>
      <div class="article-excerpt" v-else>暂无内容预览</div>

      <!-- 文章标签 -->
      <div class="article-tags" v-if="article.tags && article.tags.length">
        <span v-for="tag in article.tags" :key="tag.tagId" class="tag">
          <i class="fas fa-tag"></i> {{ tag.tagName || '未命名标签' }}
        </span>
      </div>
      <div class="article-tags" v-else>
        <span class="tag no-tags">
          <i class="fas fa-tag"></i> 无标签
        </span>
      </div>
    </router-link>
  </article>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  article: {
    type: Object,
    required: true,
    default: () => ({
      id: 0,
      title: '',
      mainContent: '',
      createTime: null,
      author: '',
      viewCount: 0,
      categoryName: '',
      tags: []
    })
  }
})

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '未知日期'
  try {
    const date = new Date(dateString)
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    }).replace(/\//g, '-')
  } catch {
    return '无效日期'
  }
}

// 获取纯文本摘要（处理HTML和Markdown内容）
const getExcerpt = (content) => {
  if (!content) return ''
  
  // 如果是Markdown格式，移除标记符号
  let plainText = content
    .replace(/^#+\s+/gm, '')      // 移除标题标记
    .replace(/!?\[.*?\]\(.*?\)/g, '')  // 移除图片和链接
    .replace(/`{3}.*?`{3}/gs, '') // 移除代码块
    .replace(/`(.*?)`/g, '$1')    // 移除行内代码
    .replace(/\*{1,2}(.*?)\*{1,2}/g, '$1') // 移除加粗/斜体
  
  // 移除HTML标签
  plainText = plainText.replace(/<[^>]*>/g, '')
  
  // 截取前120个字符
  return plainText.trim().substring(0, 120) + 
    (plainText.length > 120 ? '...' : '')
}
</script>

<style scoped>
.article-card {
  width: 100%;
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

.article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  border-color: #e0e0e0;
}

.article-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.article-title {
  font-size: 1.4rem;
  margin: 0 0 16px 0;
  color: #333;
  font-weight: 600;
  line-height: 1.4;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  color: #666;
}

.article-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.article-meta i {
  font-size: 0.9em;
  opacity: 0.8;
}

.view-count {
  margin-left: auto;
}

.article-excerpt {
  color: #555;
  line-height: 1.8;
  margin-bottom: 16px;
  font-size: 0.95rem;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  background: #f0f7ff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  color: #1890ff;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
}

.tag:hover {
  background: #d6e9ff;
}

.tag i {
  font-size: 0.8em;
}

.no-tags {
  background: #f5f5f5;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .article-card {
    padding: 18px;
    margin-bottom: 18px;
  }
  
  .article-title {
    font-size: 1.2rem;
  }
  
  .article-meta {
    gap: 12px;
    font-size: 0.8rem;
  }
  
  .article-excerpt {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .article-card {
    padding: 16px;
  }
  
  .article-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .view-count {
    margin-left: 0;
  }
}
</style>